<template>
    <div class="notice-detail content">
        <div ref="contentData" class="top-position"></div>

        <div class="bidding-content">
            <div class="left">
                <!-- 公告信息 -->
                <el-card class="left-header">
                    <info-notice
                        :data="detail" 
                    ></info-notice>
                </el-card>

                <!-- 正文 -->
                <el-card class="paper-context notice-content">
                    <el-skeleton 
                    :rows="16"
                    :loading="!detail.content" 
                    animated
                    >
                        <div 
                            class="content-center" 
                            v-html="detail.content"
                        ></div>
                    </el-skeleton>
                </el-card>

                <!-- 业主其他项目信息、该中标公司投标项目信息、候选人投标信息 -->
                <info-bottom
                    class="left-bottom"
                    :data="detail"
                    :hxr="hxr"
                ></info-bottom>
            </div>

            <!-- 右侧 -->
            <div class="right">
                <!-- 企业画像 -->
                <info-portraits 
                    :data="detail" 
                    :type="type" 
                    :hxr="hxr"
                    class="right-item"
                ></info-portraits>

                <!-- 项目信息 -->
                <info-project 
                    class="right-item" 
                    :data="detail" 
                ></info-project>

                <!-- 该项目经理所负责的项目信息 类似项目信息 -->
                <info-right
                    class="right-item" 
                    :data="detail" 
                    :type="type"
                    :hxr="hxr"
                ></info-right>
            </div>
        </div>
    </div>
</template>

<script>
import {buildTdk} from '@config/tdk';
import {getNoticeCodeByName} from './js/type-map.js';

import InfoNotice from './sections/info-notice.vue';
import InfoProject from './sections/info-project.vue';
import InfoPortraits from './sections/info-portraits.vue';
import InfoBottom from './sections/info-bottom.vue';
import InfoRight from './sections/info-right.vue';

export default {
    head() {
        return buildTdk('notice');
    },
    layout: 'client',
    components: {
        InfoProject,
        InfoNotice,
        InfoPortraits,
        InfoBottom,
        InfoRight,
    },
    data() {
        return {
            type: 'zhao-biao',

            detail: {
                notice: '',
                publishtime: '',
            },

            hxr: [],
        };
    },
    watch: {
        $route(to, from) {
            this.scrollToTop();
            
            this.getType();
            this.queryNoticeInfo();
            this.queryZbhxr();
        },
    },
    methods: {
        getType() {
            let noticetype = this.getQuery('noticetype');

            this.type = getNoticeCodeByName(noticetype);
        },
        queryNoticeInfo() {
            this.$get(`${this.$store.state.api.tbUrl}/noticerelated/noticedetail.json`, {
                noticeid: this.$route.query.guid,
                noticetype: this.$route.query.noticetype,
            }, (data, res) => {
                data.publishtime = String(data.publishtime);

                // 向外传递Data_content ,处理 null
                this.$emit('detail', data);
                
                this.detail = data;
            });
        },

        //跳转页面
        scrollToTop(data) {
            this.$refs.contentData.scrollIntoView(); //回到顶部
        },
        
        //中标概率推测
        zbProb() {
            showMsgBox('该功能即将上线');
        },

        //中标候选人信息
        queryZbhxr() {
            if (this.type !== 'zhong-biao-hxr') {
                return;
            }

            this.$get(`${this.$store.state.api.tbUrl}/noticerelated/getmulti.json`, {
                noticeid: this.$route.query.guid,
            }, (data, res) => {
                this.hxr = data;
            });
        },
    },
    mounted() {
        
    },
    created() {
        this.getType();
        this.queryNoticeInfo();
        this.queryZbhxr();
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

.notice-detail {
    $RightTitleColor: #343434;
    $RightTitleFont: 14px;

    .top-position {
        
    }

    .bidding-content {
        display: flex;
        justify-content: space-between;

        .left {
            width: 814px;

            & > div {
                margin-top: 12px;
            }

            .left-header {
                
            }

            .paper-context {
                width: 100%;
                min-height: 550px;

                .zb-btn {
                    text-align: center;
                    padding: 40px 0 30px 0;
                }
            }
        }

        .right {
            width: 374px;

            .right-item {
                margin-top: 12px;
            }
        }
    }
}
</style>
 
<style lang="scss">
    .notice-content {
        th, tr, td { display: block; box-sizing: border-box;}
        table { display:table; width: 100%; border-collapse:collapse; border:none; word-break: break-all; font-size: 12px; box-sizing: border-box;}
        table tr { display:table-row; background: white; font-size: 14px;}
        table td { display:table-cell; padding: 0 4px; border: 1px solid #b0b0b0; background: white; font-size: 14px;}
        table th { display:table-cell; padding: 0 4px; border: 1px solid #b0b0b0; background: white; font-size: 14px;}
        div, p {font-size: 14px; box-sizing: border-box;}
        span, font, a {font-size: 14px;}
        h1 {font-size: 18px; font-weight: bold;}
        h2 {font-size: 16px; font-weight: bold;}
        h3 {font-size: 16px;}
        h4 {font-size: 14px;}
    }
</style>